<template>
	<view class="item_box">
		<view class="item-top">
			<u-lazy-load :image="item.logo || vuex_config.errImg" img-mode="aspectFill"></u-lazy-load>
			<view class="top-tip">
				<text v-show="prodState.type == 1">{{ auctionType == 1 ? '准备中' : '正在进行' }}</text>
				<text v-show="prodState.type != 1">{{ prodState.type == 2 ? '已结束' : '未开始' }}</text>
				<text style="padding-left: 20rpx;" v-if="auction_num[0] && currentIndex > -1">第{{ auction_num[currentIndex].num }}轮</text>
			</view>
			<view class="down_main" v-show="prodState.times > 0">
				<view :class="['time_box', prodState.type == 1 && auctionType == 2 ? 'active' : '']">
					<template v-if="timeObj.hours > 0">
						<view class="ft-time">{{ timeObj.hours }}</view>
						<view class="span">:</view>
					</template>
					<view class="ft-time">{{ timeObj.minute }}</view>
					<view class="span">:</view>
					<view class="ft-time">{{ timeObj.second }}</view>
				</view>
				<view class="down_ti" v-if="prodState.type < 2">{{ auctionType == 2 ? '结束倒计时' : '等待时间' }}</view>
			</view>
		</view>
		<view class="item-bottom">
			<view class="bottom-title u-line-1">{{ dataForm.name }}</view>
			<view class="price-box">
				<view class="pb-item pd_first">
					<view class="price_ti">当前价格</view>
					<view class="price">
						<text class="sign">￥</text>
						 {{ currentPrice > prodStockForm.platfor_price?$price(currentPrice):'已抢' }}
					</view>
				</view>
				<view class="pb-item">
					<view class="price_ti">起拍价</view>
					<view class="price qprice">
						<text class="sign">￥</text>
						{{ prodStockForm.amount }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { auctionMixin } from './auctionMixin.js';
export default {
	mixins: [auctionMixin],
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {};
	},
	mounted() {
		if (this.item.stock_list && this.item.stock_list[0]) {
			this.auction_num = this.item.stock_list[0].auction_num || [];
			this.prodStockForm = {
				...this.item.stock_list[0],
				platfor_price:this.item.stock_list[0].platfor_price || 0,
				auctionTime: this.item.stock_list[0].duration - this.item.stock_list[0].intend,
				auction_num: []
			};
			this.currentPrice = this.prodStockForm.amount;
		}
		this.dataForm = {
			...this.item,
			stock_list: []
		};
		this.initHandle();
	},
	beforeDestroy() {
		if (this.timer) {
			clearTimeout(this.timer);
		}
		if (this.timer2) {
			clearTimeout(this.timer2);
		}
	},
	methods: {}
};
</script>

<style scoped lang="scss">
.item_box {
	background-color: #fff;
	border-radius: 14rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	width: 100%;
	.item-top {
		width: 100%;
		height: 400rpx;
		position: relative;
		.top-tip {
			position: absolute;
			top: 20rpx;
			left: 14rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			padding: 6rpx 20rpx;
			transform: scale(.9);
			color: #fff;
			background-color: var(--color);
		}
	}
	.down_main {
		position: absolute;
		right: 10rpx;
		bottom: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		.time_box {
			display: flex;
			align-items: center;
			.ft-time {
				font-size: 26rpx;
				background-color: #313131;
				color: #fff;
				border: 2rpx solid #fff;
				border-radius: 10rpx;
				text-align: center;
				padding: 0 8rpx;
			}
			.span {
				color: #fff;
				font-weight: bold;
				margin: 0 8rpx;
			}
			&.active {
				.ft-time {
					background-color: var(--color);
				}
			}
		}
		.down_ti {
			min-width: 114rpx;
			background-color: #000;
			font-size: 24rpx;
			transform-origin: 100% 50%;
			transform: scale(.85);
			color: #fff;
			padding: 4rpx 16rpx;
			border-radius: 14rpx;
			margin-top: 8rpx;
		}
	}
	.item-bottom {
		padding: 10rpx 14rpx 16rpx;
		display: flex;
		flex-direction: column;
		.bottom-title {
			width: 100%;
			padding-bottom: 10rpx;
			padding-left: 4rpx;
			font-size: 24rpx;
		}
		.price-box {
			padding: 14rpx 0;
			display: flex;
			align-items: center;
			background-color: #f5f5f5;
			border-radius: 14rpx;
			font-size: 24rpx;
			.pb-item {
				padding-left: 18rpx;
				flex: 1;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: relative;
				&.pd_first::after {
					content: '';
					width: 2rpx;
					height: 50rpx;
					background-color: #ccc;
					border-radius: 10rpx;
					position: absolute;
					right: 0;
				}
				.price_ti {
					color: #999;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.price {
					font-size: 30rpx;
					color: var(--color);
					margin-top: 2rpx;
					&.qprice {
						color: #333;
					}
					.sign {
						font-size: 24rpx;
					}
				}
			}
		}
	}
}
</style>
